<template>
  <div class="oe-exam-analysis" ref="analysisContainer">
    <top-tip
      v-if="batchTitle"
      :batchTitle="batchTitle"
      :examTitle="examTitle"
      :goManage="true"
      :batchid="batchid"
    ></top-tip>
    <div id="pdfDom">
      <div class="oe-analysis-container">
        <div class="oe-analysis-top">
          <span class="oe-top-split"></span>
          <span class="oe-top-text">
            数据统计
            <a-tooltip placement="bottomLeft">
              <template slot="title">只统计批阅完成的学生的数据</template>
              <span class="iconfont icon-wenti"></span>
            </a-tooltip>
          </span>
          <a-button type="primary" class="fr" style="margin-top: 9px" @click="getDerived" v-if="derivedShow">导出</a-button>
        </div>
        <div class="oe-analysis-echarts">
          <div class="oe-analysis-exam">
            <div class="oe-data-exam">
              <div class="oe-data-title">
                <span class="oe-data-number">
                  考试应考人数：
                  <span class="oe-data-text">{{ examShouldArriveStuNum }}</span
                  >人
                </span>
                <span class="oe-real-number">
                  实考人数：
                  <span class="oe-data-real">{{ stuJoinExamNum }}</span
                  >人
                </span>
                <span class="oe-real-number">
                  已批人数：
                  <span class="oe-data-real">{{ stuMarkedNum }}</span
                  >人
                </span>
                <span @click="getStuAnswerDetails()" class="oe-analysis-link">查看详情</span>
              </div>
              <div class="oe-data-content">
                <ul>
                  <li v-for="(icons, index) in iconList" :key="index">
                    <div class="oe-li-container">
                      <div :class="['iconfont', icons.icon]" :style="{ background: icons.color }"></div>
                      <div class="oe-li-average">{{ icons.text }}</div>
                      <div class="oe-average-text" :style="{ color: icons.color }">{{ icons.number }}</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="oe-data-echart">
              <div class="oe-data-title">
                <span class="oe-data-number">
                  考试标准等级统计
                  <!-- <a-tooltip placement="bottomLeft">
                                <template slot="title">统计数据换算成百分制展示</template>
                                <span class="iconfont icon-wenti"></span>
                </a-tooltip>-->
                  <!-- <router-link to="" class="oe-analysis-link">查看详情</router-link> -->
                </span>
              </div>
              <div class="oe-data-echart__echart">
                <v-chart ref="standardEchart" :options="standardOptions"></v-chart>
              </div>
            </div>
          </div>
          <div class="oe-analysis-grade">
            <div class="oe-grade-left">
              <div class="oe-data-title">
                <span class="oe-data-number">
                  成绩分段统计
                  <!-- <router-link to="" class="oe-analysis-link">查看详情</router-link> -->
                </span>
              </div>
              <div class="oe-grade-left__echart">
                <v-chart ref="gradeEchart" :options="gradeOptions"></v-chart>
              </div>
            </div>
            <div class="oe-grade-right">
              <div class="oe-data-title">
                <span class="oe-data-number">作答时长分段统计</span>
              </div>
              <div class="oe-grade-right__echart">
                <v-chart ref="timeEchart" :options="timeOptions"></v-chart>
              </div>
            </div>
          </div>
          <div class="oe-analysis-screen">
            <div class="oe-screen-title">
              考试异常详情
              <span @click="showCutScreenDetails()" class="oe-analysis-link">查看详情</span>
            </div>
            <div class="oe-sreen-student" style="width: 100%">
              <span
                @click="showDetail(stu)"
                class="oe-student-item"
                v-for="stu in splitScreenList"
                :key="stu.id"
                :style="{
                  background:
                    'url(' +
                    (stu.avatar || 'https://cdn-zjy.icve.com.cn/common/images/default_avatar.jpg') +
                    ') center 50%/cover no-repeat',
                }"
              >
                <span class="oe-student-name">{{ stu.name }}</span>
                <span class="oe-student-num">{{ stu.cutPageAllCount }}</span>
              </span>
            </div>
            <a-pagination
              style="text-align: center; margin-top: 10px"
              v-model="cutPageAllCurrent"
              :pageSize="cutPagepageSize"
              :total="cutPageAllTotal"
              @change="getStuChange"
            />
          </div>
        </div>
      </div>
      <div class="oe-analysis-question">
        <div class="oe-question-title">
          <span class="oe-top-split"></span>
          <span class="oe-question-title__text">题目统计（题目总数：{{ questionCount }}题）</span>
          <!-- <span class="iconfont icon-wenti"></span> -->
          <span class="oe-question-right">
            <span class="oe-question-right__text">
              主观题占比：
              <span>{{ subjectiveQuesParent }}%</span>
            </span>
            <span class="oe-question-right__text">
              客观题占比：
              <span>{{ objectiveQuesPercent }}%</span>
            </span>
          </span>
        </div>
        <div class="oe-question-search">
          <span class="oe-wrong-select">
            选择试卷：
            <a-select
              placeholder="请选择试卷"
              v-model="searQuesStatisExamStruct"
              style="width: 200px"
              @change="handleChangeQuesStatis"
            >
              <a-select-option :value="item" v-for="(item, index) in examStruct" :key="index"
                >试卷{{ item }}</a-select-option
              >
              <a-select-option :value="item" v-for="(item, index) in examRepairStruct" :key="index"
                >试卷{{ item }}</a-select-option
              >
            </a-select>
          </span>
          <span @click="getQuestionTypeStatistics()" class="oe-analysis-link">查看详情</span>
        </div>
        <div class="oe-question-echarts">
          <div class="oe-question-echarts__Left">
            <div class="oe-questio-echart__title">各题型占比统计</div>
            <v-chart ref="questionEchart" :options="questionOptions"></v-chart>
          </div>
          <div class="oe-question-echarts__right">
            <div class="oe-questio-echart__title">
              难易程度占比统计
              <!-- <span class="iconfont icon-wenti"></span> -->
            </div>
            <v-chart ref="doEchart" :options="doOptions"></v-chart>
          </div>
        </div>
      </div>

      <wrong-Analysis
        ref="wrongAnalysis"
        :examid="examid"
        :examStruct="examStruct"
        :examRepairStruct="examRepairStruct"
        :searchExamStruct="searchExamStruct"
      ></wrong-Analysis>
    </div>

    <!-- 切屏详情 -->
    <a-modal
      v-model="visibleCutPage"
      title="异常详情"
      width="800px"
      wrapClassName="oe-modal__manage"
      :afterClose="colseStuCut"
    >
      <div class="oe-modal-table">
        <div class="student-detail-item">考生姓名：{{ stuInfo.DisplayName }}</div>
        <div class="student-detail-item">考生学号：{{ stuInfo.UserNo }}</div>
        <a-table
          :columns="modalCutPageColumns"
          :dataSource="modalCutPageList"
          :pagination="modalStuCutPagination"
          @change="onModalChangeStuCut"
          :scroll="{ y: 470 }"
          v-pic
        >
          <span slot="Url" slot-scope="text, record">
            <img
              v-if="record.CutType == '移开摄像头'"
              :src="record.Url"
              :alt="record.DateCreated"
              :title="record.DateCreated"
            />
            <span v-else>---- ----</span>
          </span>
        </a-table>
      </div>
      <template slot="footer">
        <a-button class="oe-btn-delete" @click.stop="colseStuCut">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import wrongAnalysis from '@/components/exam/exam-analysis/wrongAnalysis.vue';
import topTip from '@/components/top-tip/index.vue';
import elementResizeDetectorMaker from 'element-resize-detector';
import GetOperationList from '@/lib/mixin/methods.js';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/dataZoom';
export default {
  name: 'examAnalysis',
  mixins: [GetOperationList],
  components: {
    topTip,
    wrongAnalysis,
  },
  data() {
    return {
      loading: false,
      // 数据列表
      iconList: [
        {
          icon: 'icon-pingjunfen',
          color: '#16B816',
          text: '平均分',
          number: 0,
        },
        {
          icon: 'icon-zuigaofen',
          color: '#F5941D',
          text: '最高分',
          number: 0,
        },
        {
          icon: 'icon-zuidifen',
          color: '#F56353',
          text: '最低分',
          number: 0,
        },
        {
          icon: 'icon-weijiao',
          color: '#409EFF',
          text: '缺考学生数',
          number: 0,
        },
        {
          icon: 'icon-wuxiao',
          color: '#22BDCA',
          text: '无效学生数',
          number: 0,
        },
        {
          icon: 'icon-jigelv',
          color: '#605AD8',
          text: '及格率',
          number: 0,
        },
        {
          icon: 'icon-jige',
          color: '#71DDB3',
          text: '及格人数',
          number: 0,
        },
        {
          icon: 'icon-bujige',
          color: '#FFB11A',
          text: '不及格人数',
          number: 0,
        },
        {
          icon: 'icon-shijian',
          color: '#78C446',
          text: '平均用时',
          number: 0,
        },
        {
          icon: 'icon-time-min',
          color: '#8F55E7',
          text: '最短用时',
          number: 0,
        },
      ],
      // 标准数据
      standardList: [],
      // 题型数据
      questionList: [],
      // 切屏学生
      splitScreenList: [],
      // 标准数据echart
      standardOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          icon: 'circle',
          orient: 'vertical',
          top: 'center',
          right: '1%',
          data: ['优秀人数(大于85分)', '良好人数(75-85分)', '及格人数(60-75分)', '不及格人数(小于60分)'],
          itemGap: 20,
          itemHeight: 15,
          itemWidth: 15,
          formatter: (val) => {
            let index = this.standardList.findIndex((item) => {
              return item.name === val;
            });
            if (index > -1) {
              return `${val}：${this.standardList[index].value}`;
            } else {
              return val;
            }
          },
        },
        color: ['#4FC5EA', '#78C446', '#F86846', '#FFA800'],
        series: [
          {
            name: '考试标准等级统计',
            type: 'pie',
            center: ['38%', '50%'],
            radius: ['45%', '65%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      // 成绩分段
      gradeOptions: {},
      // 作答时间
      timeOptions: {
        color: ['#AA4FEA'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '12%',
          bottom: '3%',
          top: '10%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['0-15', '15-30', '30-45', '45-60', '60-75', '75-90', '90-105', '105-120', '120以上'],
            axisTick: {
              alignWithLabel: true,
            },
            name: '时间(分)',
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            minInterval: 1,
          },
        ],
        series: [
          {
            // name: '成绩分段统计',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 50,
              },
            },
            barWidth: '20%',
            data: [],
          },
        ],
      },
      // 各题型
      questionOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          icon: 'circle',
          orient: 'vertical',
          top: 'center',
          right: '15%',
          data: [
            '单选题(客观)',
            '多选题(客观)',
            '判断题(客观)',
            '填空题(客观)',
            '填空题(主观)',
            '问答题(主观)',
            '匹配题(客观)',
            '阅读理解(客观)',
            '阅读理解(主观)',
            '完形填空(客观)',
            '完形填空(主观)',
            '视听题(客观)',
          ],
          itemGap: 10,
          itemHeight: 15,
          itemWidth: 15,
          formatter: (val) => {
            let index = this.questionList.findIndex((item) => {
              return item.name === val;
            });
            if (index > -1) {
              return `${val}：${((this.questionList[index].value * 100) / this.questionCount).toFixed(2)}%`;
            } else {
              return val;
            }
          },
        },
        color: [
          '#F9CD33',
          '#FFA800',
          '#f73609',
          '#F86846',
          '#66f507',
          '#78C446',
          '#5ED8A9',
          '#4FC5EA',
          '#8F55E7',
          '#9e09eb',
          '#605AD8',
          '#3C43FF',
        ],
        series: [
          {
            name: '各题型统计',
            type: 'pie',
            center: ['38%', '50%'],
            radius: ['45%', '65%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },

      // 难易程度
      doOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        color: ['#378FFF', '#1AD275', '#F56353', '#F6BB43', '#22BDBB', '#2246BD', ''],
        series: [
          {
            name: '难易程度占比统计',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['45%', '65%'],
            label: {
              normal: {
                show: true,
                formatter: '{b} : {d}%',
              },
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },

      //数据统计
      examShouldArriveStuNum: 0,
      stuJoinExamNum: 0,
      stuMarkedNum: 0,
      dataStatisArray: [],
      gradeStatisArray: [],
      stuScoreArr: [],
      stuAnswerTimeArray: [],
      cutScreenList: {},
      scoreSegmentList: [],
      //题目统计
      questionCount: 0,
      objectiveQuesPercent: 0,
      subjectiveQuesParent: 0,
      examQuesPercentList: {},
      quesTypeDataArray: [],
      examQuesDefArray: [],
      quesDiffList: [],

      questionType: '',
      examStruct: [],
      examRepairStruct: [],

      searchExamStruct: '',
      wrongQuesStatisList: [],
      searQuesStatisExamStruct: '',
      Title: '',
      scoreSegmentXArray: [],

      // 分页配置
      modalPagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.modalPagination.current = current;
          this.modalPagination.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.modalPagination.current = current;
          this.modalPagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0,
      },
      //切屏详情
      visibleCutPage: false,
      modalCutPageColumns: [
        {
          title: '序号',
          dataIndex: 'number',
          key: 'number',
        },
        {
          title: '类型',
          dataIndex: 'CutType',
          key: 'CutType',
        },
        {
          title: '时间',
          dataIndex: 'DateCreated',
          key: 'DateCreated',
        },
        {
          title: '异常截图',
          dataIndex: 'Url',
          width: '40%',
          key: 'Url',
          scopedSlots: {
            customRender: 'Url',
          },
        },
      ],
      modalCutPageList: [],
      stuInfo: {},
      questionInfo: {},

      exportUrl: '',
      cutPageAllCurrent: 1,
      cutPagepageSize: 0,
      cutPageAllTotal: 0,
      //学生异常详情分页配置
      modalStuCutPagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.modalStuCutPagination.current = current;
          this.modalStuCutPagination.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.modalStuCutPagination.current = current;
          this.modalStuCutPagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0,
      },
      stuId: '',
      examTitle: '',
      batchTitle: '',
      derivedShow: true
    };
  },
  props: {
    examid: {
      type: String,
      default: '',
    },
    batchid: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.getExamStructData();
    this.getContainerListener();
    this.getOpeartion();
    // 标准数据
    this.standardList = [
      {
        value: 0,
        name: '优秀人数(大于85分)',
      },
      {
        value: 0,
        name: '良好人数(75-85分)',
      },
      {
        value: 0,
        name: '及格人数(60-75分)',
      },
      {
        value: 0,
        name: '不及格人数(小于60分)',
      },
    ];
    this.standardOptions.series[0].data = this.standardList;
    //时长分段
    this.timeSegmentList = [
      {
        value: 0,
        name: '0-15',
      },
      {
        value: 0,
        name: '15-30',
      },
      {
        value: 0,
        name: '30-45',
      },
      {
        value: 0,
        name: '45-60',
      },
      {
        value: 0,
        name: '60-75',
      },
      {
        value: 0,
        name: '75-90',
      },
      {
        value: 0,
        name: '90-105',
      },
      {
        value: 0,
        name: '105-120',
      },
      {
        value: 0,
        name: '120以上',
      },
    ];
    this.timeOptions.series[0].data = this.timeSegmentList;
    //题型难度统计
    this.quesDiffList = [
      {
        value: 10,
        name: '非常简单',
      },
      {
        value: 20,
        name: '简单',
      },
      {
        value: 12,
        name: '一般',
      },
      {
        value: 32,
        name: '非常困难',
      },
      {
        value: 4,
        name: '困难',
      },
    ];
    this.doOptions.series[0].data = this.quesDiffList;
    // 题型占比数据
    this.questionList = [
      { value: 22, name: '单选题(客观)' },
      { value: 22, name: '多选题(客观)' },
      { value: 22, name: '判断题(客观)' },
      { value: 22, name: '填空题(客观)' },
      { value: 22, name: '填空题(主观)' },
      { value: 22, name: '问答题(主观)' },
      { value: 22, name: '匹配题(客观)' },
      { value: 22, name: '阅读理解(客观)' },
      { value: 22, name: '阅读理解(主观)' },
      { value: 22, name: '完形填空(客观)' },
      { value: 22, name: '完形填空(主观)' },
      { value: 22, name: '视听题(客观)' },
    ];
    this.questionOptions.series[0].data = this.questionList;
    //错题统计
    this.wrongQuesStatisList = [['第一题', '20%', '10']];
    this.getStuChange();
  },
  created() {
    this.getExamDataAnalyInfo();
    this.getExamQuestionDataAnalyInfo();
  },
  methods: {
    getStuChange(page, pageSize) {
      this.cutPageAllCurrent = page;
      let dom = document.getElementsByClassName('oe-sreen-student');
      this.cutPagepageSize = dom[0]?.offsetWidth / 94;
      this.getCutScreenList();
    },
    //考试异常详情
    getCutScreenList() {
      var that = this;
      this.$http
        .post('/api/examStatistics/ExamAnaly/getCutScreenList', {
          examId: this.examid,
          pageSize: this.cutPagepageSize,
          page: this.cutPageAllCurrent,
        })
        .then((rst) => {
          if (rst.code > 0) {
            that.splitScreenList = rst.list;
            that.cutPageAllTotal = rst.pagination.totalCount;
            that.cutPagepageSize = rst.pagination.pageSize;
          } else {
            that.$message.warning(rst.msg);
          }
        });
    },
    getQuestionTypeStatistics() {
      this.$router.push({
        name: 'questionTypeAnalysis',
        params: {
          examid: this.examid,
          searchExamStruct: this.searQuesStatisExamStruct,
        },
      });
    },
    getOpeartion() {
      this.loading = true;
      this.GetOperationList('examId', this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle;
          this.batchTitle = rst.batchTitle;
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    showDetail(r) {
      this.stuId = r.id;
      this.getStuCutPageList();
    },
    //单个学生切屏详情
    getStuCutPageList() {
      var that = this;
      this.$http
        .post('/api/examStatistics/ExamAnaly/getStuCutPageList', {
          stuId: this.stuId,
          examId: this.examid,
          pageSize: this.modalStuCutPagination.pageSize || 10,
          page: this.modalStuCutPagination.current || 1,
        })
        .then((rst) => {
          if (rst.code > 0) {
            this.visibleCutPage = true;
            this.modalCutPageList = [];
            this.modalStuCutPagination.current = rst.pagination.pageIndex;
            this.modalStuCutPagination.pageSize = rst.pagination.pageSize;
            this.modalStuCutPagination.total = rst.pagination.totalCount;

            if (rst.list.length) {
              rst.list.forEach((item, index) => {
                this.stuInfo = rst.StuInfo;
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                this.modalCutPageList.push({
                  ...item,
                  number: number,
                });
              });
            }
          } else {
            that.$message.warning(rst.msg);
          }
        });
    },
    //关闭异常弹窗
    colseStuCut() {
      this.visibleCutPage = false;
      this.modalStuCutPagination.pageSize = 10;
      this.modalStuCutPagination.current = 1;
    },
    onModalChangeStuCut(pagenation) {
      this.modalStuCutPagination.pageSize = pagenation.pageSize;
      this.modalStuCutPagination.current = pagenation.current;
      this.getStuCutPageList();
    },

    //数据统计详情
    getStuAnswerDetails() {
      this.$router.push({
        name: 'dataAnalysis',
        params: {
          examid: this.examid,
        },
      });
    },
    showCutScreenDetails() {
      this.$router.push({
        name: 'cutScreenDetails',
        params: {
          examid: this.examid,
        },
      });
    },
    // 重置状态
    displayCancel() {},

    // 监听展示父容器div的大小
    getContainerListener() {
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.querySelector('.oe-exam-analysis'), (element) => {
        setTimeout(() => {
          try {
            this.$refs.standardEchart.resize();
            this.$refs.gradeEchart.resize();
            this.$refs.timeEchart.resize();
            this.$refs.questionEchart.resize();
            this.$refs.questionErrorEchart.resize();
            this.$refs.doEchart.resize();
            this.$refs.wrongEchart.resize();
          } catch (error) {
            //
          }
        }, 330);
      });
    },
    //数据统计
    getExamDataAnalyInfo() {
      var that = this;
      this.$http
        .post('/api/examStatistics/ExamAnaly/getExamDataAnalyInfo', {
          examId: this.examid,
        })
        .then((res) => {
          if (res.code > 0) {
            //考试数据
            that.examShouldArriveStuNum = res.examShouldArriveStuNum;
            that.stuJoinExamNum = res.stuJoinExamNum;
            that.stuMarkedNum = res.stuMarkedNum;
            that.dataStatisArray = res.dataStatisArray;
            res.dataStatisArray.forEach((item, index) => {
              this.iconList[index].number = item;
            });
            //考试标准等级统计
            that.gradeStatisArray = res.gradeStatisArray;
            res.gradeStatisArray.forEach((item, index) => {
              this.standardList[index].value = item;
              this.standardList[index].name = res.gradeStatisArrayTitle[index];
            });
            this.standardOptions.legend.data = res.gradeStatisArrayTitle;

            //成绩分段统计
            that.stuScoreArr = res.stuScoreArr;
            this.setScoreSegmentList(res.stuScoreArr);
            //作答时长分段统计
            that.stuAnswerTimeArray = res.stuAnswerTimeArray;
            res.stuAnswerTimeArray.forEach((item, index) => {
              this.timeSegmentList[index].value = item;
            });
            //切屏详情
            // that.splitScreenList = res.cutScreenList;
          } else {
            that.$message.warning(res.msg);
          }
        });
    },
    //成绩分段统计
    setScoreSegmentList(data) {
      this.scoreSegmentXArray = [];
      var list = [];
      data.forEach((item, index) => {
        let xName = `${index * 10}-${(index + 1) * 10}`;
        this.scoreSegmentList.push({
          value: item,
          name: xName,
        });
        this.scoreSegmentXArray[index] = xName;
      });

      this.gradeOptions = {
        color: ['#78AEF9'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          top: '10%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            // data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
            data: this.scoreSegmentXArray,
            axisTick: {
              alignWithLabel: true,
            },
            name: '分数',
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            minInterval: 1,
          },
        ],
        series: [
          {
            name: '成绩分段统计',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 50,
              },
            },
            barWidth: '20%',
            data: this.scoreSegmentList,
          },
        ],
      };
    },
    //题目统计选择试卷
    handleChangeQuesStatis(val) {
      this.searQuesStatisExamStruct = val;
      this.getExamQuestionDataAnalyInfo();
    },

    //题目统计
    getExamQuestionDataAnalyInfo() {
      var that = this;
      this.$http
        .post('/api/examStatistics/ExamAnaly/getExamQuestionDataAnalyInfo', {
          examId: this.examid,
          examStruct: this.searQuesStatisExamStruct,
        })
        .then((res) => {
          if (res.code > 0) {
            this.questionCount = res.questionCount;
            this.objectiveQuesPercent = res.objectiveQuesPercent;
            this.subjectiveQuesParent = res.subjectiveQuesParent;
            this.examQuesPercentList = res.examQuesPercentList;
            //题型统计
            this.quesTypeDataArray = res.quesTypeDataArray;
            res.quesTypeDataArray.forEach((item, index) => {
              this.questionList[index].value = item;
            });
            //题目难度
            this.examQuesDefArray = res.examQuesDefArray;
            res.examQuesDefArray.forEach((item, index) => {
              this.quesDiffList[index].value = item;
            });
          } else {
            this.$message.warning(res.msg);
          }
        });
    },

    //获取试卷套数
    getExamStructData() {
      var that = this;
      this.$http
        .post('/api/examStatistics/ExamAnaly/getExamStructData', {
          examId: this.examid,
        })
        .then((res) => {
          if (res.code > 0) {
            this.examStruct = res.examStruct;
            this.examRepairStruct = res.examRepairStruct;
            this.Title = res.Title;
            if (this.examStruct && this.examStruct.length) {
              this.searchExamStruct = this.examStruct[0];
              this.searQuesStatisExamStruct = this.examStruct[0];
            } else {
              this.searchExamStruct = this.examRepairStruct[0];
              this.searQuesStatisExamStruct = this.examStruct[0];
            }

            this.$refs.wrongAnalysis.getStuAnsErrorList(this.searchExamStruct);
            // this.getStuAnsErrorList();
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
    getDerived() {
      this.derivedShow = false;
      window.scrollTo(0, 0);
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      setTimeout(() => {
        this.getPdf('数据统计');
        this.derivedShow = true;
      }, 100);
    },
  },
};
</script>
